<template>
  <div>
    <el-card style="margin-top: 10px">
      <div class="container">
        <div class="xzjq">
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="关键字">
              <el-input placeholder="根据文章标题搜索" v-model="params.keyword"></el-input>
            </el-form-item>
            <el-form-item label="状态" class="zt">
              <el-select placeholder="请选择" v-model="params.state">
                <el-option
                  v-for="item in option"
                  :key="item.id"
                  :label="item.value"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="eliminate" size="small">清除</el-button>
              <el-button type="primary" @click="search" size="small">搜索</el-button>
            </el-form-item>
          </el-form>
          <div>
            <el-button type="success" icon="el-icon-edit" @click="adddialog" size="small"
              >新增技巧</el-button
            >
          </div>
        </div>
        <el-alert
          style="margin-bottom: 15px"
          v-if="alertText !== ''"
          :title="alertText"
          type="info"
          show-icon
          :closable="false"
        >
        </el-alert>
      </div>
      <el-table :data="list" fit highlight-current-row>
        <el-table-column label="序号" type="index" prop="id" />
        <el-table-column label="文章标题" prop="title" min-width="280">
          <template #default="{ row }">
            {{ row.title }}
            <el-link :underline="false">
              <i
                class="el-icon-film"
                v-show="row.videoURL"
                @click="iconbut(row)"
                :style="{ color: 'blue' }"
              >
              </i>
            </el-link>
          </template>
        </el-table-column>
        <el-table-column label="阅读数" prop="visits"> </el-table-column>
        <el-table-column label="录入人" prop="username" />
        <el-table-column label="录入时间" prop="createTime" min-width="150">
          <template #default="{ row }">
            {{ row.createTime | createTime }}
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="state">
          <template #default="{ row }">
            <!-- <span v-if="slot.row.state == 1">已启用</span>
          <span v-else>已禁用</span> -->
            {{ row.state ? '已启动' : '已禁用' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="200">
          <template #default="{ row }">
            <el-button type="text" size="small" @click="openadddialog(row.id)">预览</el-button>
            <el-button type="text" size="small" @click.native="jy(row)">
              <!-- <span v-if="scope.row.state == 0" @click="jy(scope.row.id)">启用</span>
            <span v-else>禁用</span> -->
              {{ row.state ? '禁用' : '启用' }}
            </el-button>
            <el-button
              type="text"
              size="small"
              :disabled="Boolean(row.state)"
              @click="adddialog(row)"
              >修改</el-button
            >
            <el-button
              type="text"
              size="small"
              :disabled="Boolean(row.state)"
              @click.native="dellist(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div>
        <!-- 分页 -->
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="Number(params.page)"
          :total="total"
          :page-size="Number(params.pagesize)"
          :page-sizes="[5, 10, 20, 30]"
          layout="->, prev, pager, next,sizes, jumper"
        ></el-pagination>
      </div>
      <articles
        :dialogVisible="dialogVisible"
        @closeDialog="closeDialog"
        @getlist="getlist"
        ref="updataarticles"
      ></articles>
      <preview
        :closedialogVisible="closedialogVisible"
        @dialogClose="dialogClose"
        ref="addpreview"
      ></preview>
    </el-card>
    <!-- 视频 -->
    <div class="videomasks" v-if="look == true">
      <el-button icon="el-icon-error" circle @click="look = false"></el-button>
      <!-- 视频：h5的视频播放video -->
      <video :src="videoSrc" controls="controls" autoplay width="100%" height="100%">
        您的浏览器不支持 video 标签。
      </video>
    </div>
  </div>
</template>

<script>
import { list, remove, changeState } from '@/api/hmmm/articles.js'
import dayjs from 'dayjs'
import articles from '@/module-hmmm/components/articles-add'
import preview from '@/module-hmmm/components/articles-preview'

export default {
  components: {
    articles,
    preview
  },
  filters: {
    createTime (val) {
      return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  data () {
    return {
      look: false,
      list: [],
      dialogVisible: false,
      closedialogVisible: false,
      videoSrc: '',
      option: [
        {
          id: 1,
          value: '启用'
        },
        {
          id: 0,
          value: '禁用'
        }
      ],
      alertText: '',

      params: {
        page: 1,
        pagesize: 10,
        keyword: '',
        state: null
      },
      total: null,
      videoURL: ''
      // value: '',

    }
  },
  mounted () {
    this.getlist()
  },
  methods: {
    // 获取列表数据
    async getlist () {
      const res = await list(this.params)
      console.log(res)
      // 获取数据给list
      this.list = res.data.items
      // 获取总条数
      this.total = res.data.counts
      console.log(this.total)
      this.alertText = `共 ${this.total} 条记录`
    },

    // 每页几条数据
    handleSizeChange (val) {
      this.params.pagesize = val
      this.params.page = 1

      if (this.params.page === 1) {
        this.getlist(this.params)
      }
    },
    // 每页跳转页
    handleCurrentChange (val) {
      this.params.page = val
      this.getlist()
    },
    // 搜索信息
    async search () {
      const res = await list(this.params)
      // 获取数据给list
      this.list = res.data.items
      // 获取总条数
      this.total = res.data.counts
      this.alertText = `共 ${this.total} 条记录`
      this.params.page = 1
      this.getlist()
    },
    // 清除
    eliminate () {
      this.params.keyword = ''
      this.params.state = null
      this.getlist()
    },
    // handleFilter () {
    //   this.params.page = 1
    //   this.getList(this.params)
    // },
    // 启用按钮
    async jy (data) {
      data.state = data.state ? 0 : 1
      await changeState(data)
      this.$message.success('操作成功')
      //   console.log(data.state)
      //   if (data.state === 1) {
      //     await changeState(data, data.state = 0)
      //   } else {
      //     await changeState(data, data.state = 1)
      //   }
      //   console.log(data)
      // this.getlist()
    },
    // 删除
    dellist (id) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        console.log(id)
        await remove(id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        // 更新列表
        this.getlist()
      }).catch(() => {

      })
    },
    // 视频播放
    iconbut (row) {
      console.log(row)
      this.look = true
      this.videoSrc = row.videoURL
    },
    // articles-add，新增/修改，控制弹框显示的
    adddialog (data) {
      // console.log(data)
      this.dialogVisible = true
      if (data.id) {
        console.log(111)
        this.$refs.updataarticles.preview(data)
      }
    },
    closeDialog () {
      this.dialogVisible = false
    },
    // articles-preview,预览
    openadddialog (id) {
      this.closedialogVisible = true
      this.$refs.addpreview.preview(id)
    },
    dialogClose () {
      this.closedialogVisible = false
    }
  }
}

</script>

<style scoped lang='scss'>
.el-card {
  margin: 10px;
  // margin-right: 10px;
  // margin-bottom: 10px;
}
// 富文本编辑器
// .el-form-item::v-deep .ql-editor {
//   height: 200px;
// }
// .el-form-item::v-deep .ql-toolbar.ql-snow {
//   height: 38px;
//   padding: 0px;
//   padding-left: 8px;
// }
.zt {
  margin-left: 36px;
}
.xzjq {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
// 视频播放
.videomasks {
  width: 800px;
  height: 500px;
  position: fixed;
  left: 400px;
  top: 550px;
  margin-top: -30%;
  z-index: 20;
  /* transform: translate(-50%, -50%); */
}
.videomasks .el-button {
  display: flex;
  background-color: #000000;
  font-size: 30px;
  opacity: 0.6;
  margin: 0 auto;
}
</style>
